<template>
    <div class="line-box">
        <div class="line-item" :style="{'background-color': color,'width':num+'%'}">{{num}}%</div>
    </div>
</template>
<script>
export default {
    props:{
        num: {
            type:Number,
            default: 80
        },
        color: {
            type:String,
            default: 'black'
        }
    }
}
</script>
<style scoped>
.line-box{
            width: 100%;
            height: 0.2rem;
            background-color: rgb(244, 244, 244);
            border-radius: 0.2rem;
            box-shadow:2px 2px 3px rgb(163, 162, 162);
        }
        .line-item{
            height: 100%;
            border-radius: 0.2rem;
            line-height: 0.2rem;
            text-align: right;
            color: white;
        }
</style>